<%--
  Created by IntelliJ IDEA.
  User: lixin
  Date: 2022/12/29
  Time: 10:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery中的ajax</title>
    <script src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

      $(function (){

          //对ajax按钮绑定点击事件
          $("#ajax").click(function (){

            //ajax使用json格式传递 settings
            $.ajax({
              url:"<%=request.getContextPath()%>/ajax",
              type:"POST",
              //传递参数的两个方式
              data:{keyword:"ajax"},
              // data:"keyword=ajax&k=v&k1=v1"
              dataType:"text",
              //servlet执行成功后调用的函数
              success:function (data){
                $("#message").html(data);
              },
              error:function (){
                alert("出错了")
              }
            })
          })

          //对ajaxGet按钮绑定点击事件
          $("#ajaxGet").click(function (){

              //get以传递参数的形式定义
              $.get(
                  "<%=request.getContextPath()%>/ajax",
                  //传递参数的两个方式
                  {keyword:"ajaxGet"},

                  //servlet执行成功后调用的函数
                  function (data){
                      $("#message").html(data);
                  },

                  "text"

              )

          })

          //对ajax按钮绑定点击事件
          $("#ajaxPost").click(function (){

              $.post(
                  "<%=request.getContextPath()%>/ajax",
                  //传递参数的两个方式
                  {keyword:"ajaxPost"},

                  //servlet执行成功后调用的函数
                  function (data){
                    $("#message").html(data);
                  },

                  "text"
              )

          })

          //对ajax按钮绑定点击事件
          $("#ajaxGetJson").click(function (){

              $.getJSON(
                  "<%=request.getContextPath()%>/ajax",
                  {keyword:"ajaxGetJson"},
                  function (data){
                      $("#message").html(data.mess1+"====="+data.mess2);
                  }
              )

          })

          //对ajax按钮绑定点击事件
          $("#ajaxLoad").click(function (){

              $("#message").load(
                  "<%=request.getContextPath()%>/ajax",
                  {keyword:"ajaxLoad"},
                  function (data){
                      alert("load的回调函数");
                  }
              )

          })

      })

    </script>
</head>
<body>

  <p id="message"></p>
  <input type="button" value="ajax" id="ajax">
  <input type="button" value="ajaxGet" id="ajaxGet">
  <input type="button" value="ajaxPost" id="ajaxPost">
  <input type="button" value="ajaxGetJson" id="ajaxGetJson">
  <input type="button" value="ajaxLoad" id="ajaxLoad">

</body>
</html>
